<template>
  <div class="chooseSettle">
    <el-button
      plain
      type="single-number"
      style="margin-left: 10px"
      @click="showContractList"
      >选择
    </el-button>
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      @closed="handleClose"
    >
      <div class="ccui-advanced-search-wrapper">
        <el-search :formProp="form" @search="search">
          <template slot="search">
            <el-input
              v-model="form.partyBName"
              clearable
              searchLabel="供应商"
              placeholder="请输入供应商名称模糊查询"
            ></el-input>
          </template>
        </el-search>
      </div>
      <el-table
        :dataObj="singleSelectData"
        :data="purchaseListList"
        class="ccui-form-child-table"
        border
        width="600px"
        style="margin-bottom: 20px"
        max-height="800px"
      >
        <el-table-column
          show-overflow-tooltip
          label="序号"
          type="index"
          align="center"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="contractCode"
          label="合同编号"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="contractName"
          label="合同名称"
        >
        </el-table-column>

        <el-table-column
          show-overflow-tooltip
          prop="partyAName"
          label="签订单位"
        >
        </el-table-column>

        <el-table-column show-overflow-tooltip prop="partyBName" label="供应商">
        </el-table-column>

        <el-table-column label="操作" width="127">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text" @click="handlecheck(row)"
              >选择
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-footer" style="height: 30px">
        <div class="ccui-table-footer">
          <div id="ccui-paging">
            <el-pagination
              :total="total"
              :pager-count="5"
              :page-size="formDate.pageSize"
              :current-page="formDate.pageNo"
              prev-text="< 上一页"
              next-text="下一页 >"
              background
              layout="total, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @prev-click="handlePrev"
              @next-click="handleNext"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import { getSupplierData } from "@/basa/api";

import { listSmpPcConcPage } from "../../../app/settlement-management/settlement-maintenance-approval/api/settlement-approval";

export default {
  name: "chooseSettleContract",
  data() {
    return {
      title: "选择合同",
      // 招标结果关联弹窗相关变量 start
      tableData: [],
      formDate: {
        supplierName: "",
        supplierCode: "",
        unifiedCode: "",
        mainType: "A",
        orgid: "",
        materialCode: "",
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      purchaseListList: [],
      singleSelectData: [],
      dialogVisible: false,
      form: {
        partyBName: ""
      }
      // 招标结果关联弹窗相关变量 end
    };
  },
  props: {
    partyAId: {
      type: Number
    },
    recordsTotal: {
      type: Number
    },
    reportInOrgName: {
      type: String
    },
    reportOrgId: {
      type: Number
    }
  },
  watch: {},
  methods: {
    showContractList() {
      if (this.reportInOrgName == "") {
        this.$showErrorMessage("请先选择填报单位！");
      } else {
        this.dialogVisible = true;
        this.getContractList();
      }
    },
    getContractList() {
      listSmpPcConcPage({
        pageNo: this.formDate.pageNo,
        pageSize: this.formDate.pageSize,
        // reportInOrgId: this.reportOrgId
        reportOrgId: this.reportOrgId
      }).then(res => {
        this.purchaseListList = res.data.data.rows;
        this.total = res.data.data.recordsTotal;
      });
    },
    /// 每页条数发生改变
    handleSizeChange(val) {
      this.pageNoCode = 1;
      this.getContractList();
    },
    // 当前页发生改变
    handleCurrentChange(val) {
      this.formDate.pageNo = val;
      this.getContractList();
    },
    // 上一页
    handlePrev() {
      --this.pageNoCode;
      this.getContractList();
    },
    // 下一页
    handleNext() {
      ++this.pageNoCode;
      this.getContractList();
    },
    handlecheck(row) {
      this.$emit("numrow", row);
      this.dialogVisible = false;
    },
    handleClose() {},
    search(searchData) {
      console.log(searchData);
      listSmpPcConcPage({
        pageNo: this.formDate.pageNo,
        pageSize: this.formDate.pageSize,
        reportOrgId: this.reportOrgId,
        partyBName: searchData.partyBName
      }).then(res => {
        this.purchaseListList = res.data.data.rows;
        this.total = res.data.data.recordsTotal;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.chooseSettle {
  display: inline-block;
}

/deep/
  .el-single-select
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-dialog-box
  .dialog-top {
  justify-content: space-between;
}

/deep/ .el-table__body-wrapper {
  max-height: 230px !important;
}

/deep/ .label {
  display: inline-block;
  width: 130px !important;
  text-align: right;
}

/deep/ .el-dialog__footer {
  border-top: none;
}

/deep/ .el-table td,
.el-table th {
  padding: 5px 0 !important;
}

/deep/.el-search .el-searchs-right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex: 1;
  display: flex;
}
</style>
